<template>
  <div>
    <Card :bordered="false" dis-hover class="card">
      <p slot="title">轮播图展示</p>
      <div slot="extra">
        <Button type="primary">编辑</Button>
      </div>
      <Carousel class="banner-box" v-model="value" loop dots="outside" radius-dot>
        <CarouselItem>
          <div class="demo-carousel">1</div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">2</div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">3</div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">4</div>
        </CarouselItem>
      </Carousel>
    </Card>
    <Card :bordered="false" dis-hover class="card">
      <p slot="title">轮播图列表</p>
      <div slot="extra">
        <Button type="primary">新增</Button>
      </div>
      <div class="list-box">
        <Row>
          <Col span="6" v-for="(item,index) in list" :key="index">
            <div class="item-box">
              {{item.url}}
            </div>
          </Col>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: 1,
      list: [
        { url: '123' },
        { url: '123' },
        { url: '123' },
        { url: '123' },
        { url: '123' },
        { url: '123' }
      ]
    }
  }
}
</script>

<style lang="less">
  .banner-box{
    width: 500px;
    margin: 0 auto;
  }
  .demo-carousel{
    width: 100%;
    height: 120px;
    background-color: #348EED;
  }
  .card{
    margin-bottom: 20px;
  }
  .item-box{
    border: 1px dashed #eeeeee;
    height: 100px;
    margin: 12px;
  }
</style>
